<template>
  <div class="app-container">

    <div style="padding-left:20px;padding-top:15px;padding-right: 20px; height: 640px; margin-bottom: 30px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) ">
      <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
        <el-form-item  label="所属科室" prop="departId">
        <el-select v-model="queryParams.departId" placeholder="请选择"  style="width: 240px" >
          <el-option
            v-for="item in deptOptions"
            :key="item.departId"
            :label="item.departName"
            :value="item.departId"
          >
          </el-option>
        </el-select>
      </el-form-item>

        <el-form-item  label="患者姓名" prop="patientId">
          <el-select v-model="queryParams.patientId" filterable placeholder="请选择"  style="width: 240px">
            <el-option
              v-for="item in patientOptions"
              :key="item.patientId"
              :label="item.patientName"
              :value="item.patientId"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item  label="挂号类型" prop="registerType">
          <el-select v-model="queryParams.registerType" placeholder="请选择" prop="registerType" >
            <el-option
              v-for="item in typeOptions"
              :key="item.registerTypeId"
              :label="item.registerType"
              :value="item.registerType"
              :disabled="item.status == 1"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="挂号时段" prop="registerSubsectionTime">
          <el-input
            v-model="queryParams.registerSubsectionTime"
            placeholder="挂号时段"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item label="就诊状态" prop="registerStatus">
          <el-radio-group v-model="queryParams.registerStatus">
            <el-radio
              v-for="dict in registerOptions"
              :key="dict.dictValue"
              :label="dict.dictValue"
            >{{dict.dictLabel}}</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="挂号时间" >
          <div class="block">
            <el-date-picker
              v-model="queryParams.registerTime"
              align="right"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              :picker-options="pickerOptions"
              @keyup.enter.native="handleQuery">
            </el-date-picker>
          </div>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button type="primary"  icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table v-loading="loading"  border align:center :data="pateintList" style="width: 100%;height: 77%" @selection-change="handleSelectionChange">
        <el-table-column label="挂号单号" prop="registerId" align="center" />
        <el-table-column label="患者姓名" prop="patientName" align="center" />
        <el-table-column label="科室名称" prop="departName"  align="center"  />
        <el-table-column label="接诊医生" prop="doctorName"  align="center"  />
        <el-table-column label="挂号费用" prop="registerCost"  align="center" />
        <el-table-column label="流水编号" prop="turnoverId"  align="center"  />
        <el-table-column label="就诊状态" prop="outpatientStatus"  align="center" :formatter="statusFormat"/>
        <el-table-column label="挂号日期" prop="registerTime"  align="center"  />
        <el-table-column label="挂号类型" prop="registerType"  align="center" />
        <el-table-column label="挂号时段" prop="registerSubsectionTime"  align="center"  />
        <el-table-column label="操作" align="center" width="180" >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="success"
              @click="handleEdit(scope.$index, scope.row)"
              icon="el-icon-check">收费</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              icon="el-icon-close">退费</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
    <!--页数-->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!--修改收费信息窗口-->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" >
        <el-form-item label="挂号单号" prop="registerId" disabled>
          <el-input v-model="form.registerId" placeholder="挂号单" v-bind:readonly="isReadOnly" style="width: 280px"/>
        </el-form-item>
        <el-form-item label="患者姓名" prop="patientName">
          <el-input v-model="form.patientName" placeholder="请输入患者姓名" v-bind:readonly="isReadOnly" style="width: 280px"/>
        </el-form-item>
        <el-form-item label="挂号类型" prop="registerType">
          <el-input v-model="form.registerType" placeholder="请输入挂号类型" v-bind:readonly="isReadOnly" style="width: 280px"/>
        </el-form-item>

        <el-form-item label="已收费金额" prop="registerCost" >

          <el-input v-model="form.registerCost" placeholder="请输入收费/退费金额" style="width: 280px"/>
          <el-popover
            placement="top-start"
            title="挂号费用"
            width="400"
            trigger="hover"
            content="门诊:3元  |  门诊+病例:6元  |  急诊：10元  |  急诊+病例:8元">
            <el-button type="success" slot="reference" icon="el-icon-view" style="border-radius:20px;padding-right: 10px;padding-left: 10px;margin-left: 20px;border: 0px"></el-button>
          </el-popover>
        </el-form-item>
        <el-form-item label="收费状态" prop="costStatus">
          <el-radio-group v-model="form.costStatus">
            <el-radio
              v-for="dict in costOptions"
              :key="dict.dictValue"
              :label="dict.dictValue"
            >{{dict.dictLabel}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    import {findRegisterType,addpatient,findDeptList,findPatientList,selectDoctorList} from "@/api/outpatient/patient";
    import {findRegiDeInfo,findReCostInfo,updateReCostInfo} from "../../../api/outpatient/register";

    export default {
        name: "Post",

        data() {
            return {
                isReadOnly:true,
                price:0,
                code: '',
                // 遮罩层
                loading: true,
                registerTypes:[],
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 岗位表格数据
                postList: [],
                //查询挂号列表
                pateintList:[],
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                opens: false,
                // 状态数据字典
                statusOptions: [],
                //性别字典
                sexOptions:[],
                //
                typeOptions:[],
                //
                deptOptions:[],
                //收费字典
                costOptions:[],
                //就诊状态字典
                registerOptions:[],
                //医生选择器
                doctorOptions:[],
                //患者选择器：
                patientOptions:[],
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                },
                form:{
                    postName:'',
                    postCode:'',
                    postSort:'',

                },
                // 表单校验
                rules: {

                },
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                },
                registerTime: '',
            };
        },


        created() {
            this.getList();
            this.selectType();
            //字典下拉框
            this.getDicts("sys_normal_disable").then(response => {
                this.statusOptions = response.data;
            });
            this.getDicts("sys_user_sex").then(response => {
                this.sexOptions = response.data;
            });
            this.getDicts("order_pay_status").then(response => {
                this.costOptions = response.data;
            });
            this.getDicts("patient_register_status").then(response => {
                this.registerOptions = response.data;
            });
            //自建下拉框
            findRegisterType().then(response => {
                console.log(response)
                this.typeOptions = response.data;
            });
            findDeptList().then(response => {
                console.log(response)
                this.deptOptions = response.data;
            });
            findPatientList().then(response => {
                console.log(response)
                this.patientOptions = response.data;
            });
            selectDoctorList().then(response => {
                console.log(response)
                this.doctorOptions = response.data;
            });
        },
        methods: {
            /** 查询岗位列表 */
            getList() {
                this.loading = true;
                findRegiDeInfo(this.queryParams).then(response => {
                    this.pateintList = response.rows;
                    this.total = response.total;
                    this.loading = false;
                });
            },
            // 岗位状态字典翻译
            statusFormat(row, column) {
                return this.selectDictLabel(this.registerOptions, row.outpatientStatus);
            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            // 取消按钮
            cancels() {
                this.opens = false;
                this.reset();
            },
            // 表单重置
            reset() {
                this.form = {
                    postId: undefined,
                    postCode: undefined,
                    postName: undefined,
                    postSort: 0,
                    status: "0",
                    remark: undefined
                };
                this.resetForm("form");
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },

            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.postId)
                this.single = selection.length != 1
                this.multiple = !selection.length
            },
            /** 新增患者信息按钮操作 */
            handleAdd() {
                this.reset();
                this.open = true;
                this.title = "添加患者信息";
            },
            /** 新增挂号单按钮操作 */
            registerAdd() {
                this.reset();
                this.opens = true;
                this.title = "添加挂号信息";
            },
            /** 查询按钮操作 */
            selectType() {
                findRegisterType().then(response => {
                    this.typeOptions = response.data;
                });
                findDeptList().then(response => {
                    this.deptOptions = response.data;
                });
                findPatientList().then(response => {
                    this.patientOptions = response.data;
                });
                selectDoctorList().then(response => {
                    this.doctorOptions = response.data;
                });
            },

            /** 提交按钮 */
            submitForm: function () {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                            updateReCostInfo(this.form).then(response => {
                                this.msgSuccess("已修改收费信息");
                                this.open = false;
                                this.getList();
                            });
                    }
                });
            },

            /** 删除按钮操作 */
            handleDelete(row) {
                const postIds = row.postId || this.ids;
                this.$confirm('是否确认删除岗位编号为"' + postIds + '"的数据项?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return delPost(postIds);
                }).then(() => {
                    this.getList();
                    this.msgSuccess("删除成功");
                })
            },
            /** 导出按钮操作 */
            handleExport() {
                const queryParams = this.queryParams;
                this.$confirm('是否确认导出所有岗位数据项?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return exportPost(queryParams);
                }).then(response => {
                    this.download(response.msg);
                })
            },
            //收费退费按钮
            handleEdit(index, row) {
                console.log(row);
                const registerId = row.registerId ;
                findReCostInfo(registerId).then(response => {
                     if(row.costStatus==0){
                        this.form = response.data;
                        this.open = true;
                        this.title = "收费/退费操作";
                    }else{
                         this.$message.error("此挂号单已支付挂号费用");
                     }
                });
            },
            handleDelete (index, row) {
                console.log(row.outpatientStatus)
                const registerId = row.registerId ;
                findReCostInfo(registerId).then(response => {
                    if(row.costStatus==1 && row.outpatientStatus==0){
                        this.form = response.data;
                        this.open = true;
                        this.title = "收费/退费操作";
                    }else if (row.outpatientStatus==1){
                        this.$message.error("此挂号单已完成就诊无法退费");
                    }else{
                        this.$message.error("此挂号单未支付挂号费用");
                    }
                });
            },
        }
    };
</script>
